<!DOCTYPE html>
<html lang="en">

<head>
    <title>GPT Researcher</title>
    <meta name="description" content="A research assistant powered by GPT-4">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="./static/favicon.ico">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/site/styles.css" />
    <style>
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }

        .agent-name {
            text-align: center;
        }

        .agent-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .agent-choices {
            display: none;
        }

        .btn-show {
            display: none;
        }
    </style>
</head>

<body>

    <section class="landing">
        <div class="max-w-5xl mx-auto text-center">
            <h1 class="text-4xl font-extrabold mx-auto lg:text-7xl">
                Say Goodbye to <br>
                <span
                    style="background-image:linear-gradient(to right, #9867F0, #ED4E50); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Hours
                    of Research</span>
            </h1>
            <p class="max-w-6xl mx-auto text-gray-600 mt-8" style="font-size:20px">
                Say Hello to <b>GPT Researcher</b>, your AI mate for rapid insights and comprehensive research. <br>
                GPT Researcher takes care of everything from accurate source gathering and organization of research results to generation of customized reports with citations.
            </p>
            <a href="#form" class="btn btn-primary">Get Started</a>
        </div>
    </section>

    <main class="container" id="form">
        <div class="agent-item"><img src="/static/gptr-logo.png" class="avatar" alt="Auto Agent"></div>
        <form method="POST" class="mt-3" onsubmit="GPTResearcher.startResearch(); return false;">
            <div class="form-group">
                <label for="task" class="agent-question">What would you like me to research next?</label>
                <input id="task" name="task" class="form-control" required></input>
                <input type="radio" name="agent" id="autoAgent" value="Auto Agent" checked hidden>
            </div>
            <div class="form-group">
                <div class="row">


                </div>
                <button type="button" id="btnShowAuto" class="btn btn-secondary mt-3 btn-show">Auto Agent</button>
            </div>
            <div class="form-group">
                <label for="report_type" class="agent-question">What type of report would you like me to
                    generate?</label>
                <select name="report_type" class="form-control" required>
                    <option value="research_report">Summary - Short and fast (~2 min)</option>
                    <option value="detailed_report">Detailed - In depth and longer (~5 min)</option>
                    <option value="resource_report">Resource Report</option>
                </select>
            </div>
            <div class="form-group">
                <label for="tone" class="agent-question">In which tone would you like the report to be
                    generated?</label>
                <select name="tone" id="tone" class="form-control" required>
                    <option value="Objective">Objective - Impartial and unbiased presentation of facts and findings
                    </option>
                    <option value="Formal">Formal - Adheres to academic standards with sophisticated language and
                        structure</option>
                    <option value="Analytical">Analytical - Critical evaluation and detailed examination of data and
                        theories</option>
                    <option value="Persuasive">Persuasive - Convincing the audience of a particular viewpoint or
                        argument</option>
                    <option value="Informative">Informative - Providing clear and comprehensive information on a topic
                    </option>
                    <option value="Explanatory">Explanatory - Clarifying complex concepts and processes</option>
                    <option value="Descriptive">Descriptive - Detailed depiction of phenomena, experiments, or case
                        studies</option>
                    <option value="Critical">Critical - Judging the validity and relevance of the research and its
                        conclusions</option>
                    <option value="Comparative">Comparative - Juxtaposing different theories, data, or methods to
                        highlight differences and similarities</option>
                    <option value="Speculative">Speculative - Exploring hypotheses and potential implications or future
                        research directions</option>
                    <option value="Reflective">Reflective - Considering the research process and personal insights or
                        experiences</option>
                    <option value="Narrative">Narrative - Telling a story to illustrate research findings or
                        methodologies</option>
                    <option value="Humorous">Humorous - Light-hearted and engaging, usually to make the content more
                        relatable</option>
                    <option value="Optimistic">Optimistic - Highlighting positive findings and potential benefits
                    </option>
                    <option value="Pessimistic">Pessimistic - Focusing on limitations, challenges, or negative outcomes
                    </option>
                </select>
            </div>
            <div class="form-group">
                <label for="report_source" class="agent-question">What sources would you like me to research
                    from?</label>
                <p class="text-left mt-0 pt-0" style="font-size: 0.7rem;">You can now do research on local documents as
                    well. Please make sure to add the DOC_PATH env variable pointing to your documents folder.</p>
                <select name="report_source" class="form-control" required>
                    <option value="web">The Web</option>
                    <option value="local">My Documents</option>
                    <option value="hybrid">Hybrid</option>
                    <option value="deep">Deep Research</option>
                    <option value="azure">Azure storage</option>
                </select>
            </div>
            <div class="form-group">
                <label for="queryDomains" class="form-label">Query Domains (Optional)</label>
                <input type="text" class="form-control" id="queryDomains" name="query_domains" placeholder="Enter domains separated by commas">
                <small class="text-muted">Example: techcrunch.com, forbes.com</small>
            </div>
            <input type="submit" value="Research" class="btn btn-primary button-padding">
        </form>

        <div class="margin-div">
            <h2>Agent Output</h2>
            <p class="mt-2 text-left" style="font-size: 0.8rem;">An agent tailored specifically to your task
                will be generated to provide the most precise and relevant research results.</p>
            <div id="output"></div>
        </div>
        <div class="images_div">
            <div id="selectedImagesContainer" style="display: none;"></div>
        </div>
        <div class="margin-div">
            <h2>Research Report</h2>
            <div id="reportContainer"></div>
            <div id="reportActions">
                <div class="alert alert-info" role="alert" id="status"></div>
                <a id="copyToClipboard" onclick="GPTResearcher.copyToClipboard()" class="btn btn-secondary mt-3" style="margin-right: 10px;">Copy to clipboard (markdown)</a>
                <a id="downloadLinkMd" href="#" class="btn btn-secondary mt-3" style="margin-right: 10px;" target="_blank" rel="noopener noreferrer">Download as Markdown</a>
                <a id="downloadLink" href="#" class="btn btn-secondary mt-3" style="margin-right: 10px;" target="_blank" rel="noopener noreferrer">Download as PDF</a>
                <a id="downloadLinkWord" href="#" class="btn btn-secondary mt-3" style="margin-right: 10px;" target="_blank" rel="noopener noreferrer">Download as Docx</a>
                <a id="downloadLinkJson" href="#" class="btn btn-secondary mt-3" style="margin-right: 10px;" target="_blank" rel="noopener noreferrer">Download Log</a>
            </div>
        </div>
    </main>

    <footer>
        <p>
            <a target="_blank" href="https://gptr.dev">Homepage</a> |
            <a target="_blank" href="https://github.com/assafelovic/gpt-researcher">GitHub</a> |
            <a target="_blank" href="https://discord.gg/spBgZmm3Xe">Discord</a>
        </p>
        <p>GPT Researcher &copy; 2024</p>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
    <script src="/site/scripts.js"></script>
    <script>
        // const btnChoose = document.getElementById('btnChoose');
        const btnShowAuto = document.getElementById('btnShowAuto');
        const autoAgentDiv = document.getElementById('autoAgentDiv');
        const agentChoices = document.getElementsByClassName('agent-choices');

        /**
        btnChoose.addEventListener('click', function () {
            btnShowAuto.style.display = 'inline-block';
            btnChoose.style.display = 'none';
            autoAgentDiv.style.display = 'none';
            agentChoices[0].style.display = 'flex';
        });
        **/

        btnShowAuto.addEventListener('click', function () {
            btnShowAuto.style.display = 'none';
            btnChoose.style.display = 'inline-block';
            autoAgentDiv.style.display = 'flex';
            agentChoices[0].style.display = 'none';
        });

        const tagsInput = document.getElementById('tags-input');
        const input = document.getElementById('custom_source');

        if (input) {
            input.addEventListener('keypress', function (e) {
            if ((e.key === 'Enter' || e.key === ",") && input.value !== '') {
                e.preventDefault();
                GPTResearcher.addTag(input.value);
                input.value = '';
            }
        });
        }

</script>
</body>

</html>
